<template>
  <div ref="wrapper" @touchend="handleTouchEnd">
    <div class="list" v-if="list.length">
       <div class="item"> <!--  v-for="item of list" :key="item.id" -->
         <!-- <img src="http://www.henu.edu.cn/images/index/henu.png" alt=""> -->
         <div class="item-title theme">投票主题：{{obj.vcTheme}}</div>
         <div class="box">
           <div class="item-tiem">模式：
           {{appear = obj.vcMode ==='11' ? '投票模式' : obj.vcMode === '00' ? '评分模式 0-100分' : obj.vcMode === '01' ? '评分模式 60-100分' : '评分模式 80-100分'}}</div>
           <div class="item-desc" :class="{appear: !obj.vcMode === '11'}">胜选人数：{{obj.vcWinnum}}</div>
           <div class="item-title">监票人：{{obj.vcSname}}</div>
           <div class="item-title">计票人：{{obj.vcTname}}</div>
           <router-link :to="'/vote/' + obj.vcId" class="item-button" tag="span">进入投票</router-link>
        </div>
        </div>
    </div>
    <div class="empty" v-else>
      <div>您目前暂时还没有投票的机会</div>
    </div>
  </div>
</template>

<script>
import Bscroll from 'better-scroll'
import { mapState, mapActions } from 'Vuex'
import axios from 'axios'
export default {
  name: 'VoteList',
  computed: {
    ...mapState(['voteId'])
  },
  data () {
    return {
      list: [],
      obj: {}
    }
  },
  methods: {
    ...mapActions(['themeId']),
    getVoteInfo () {
      axios.post('http://192.168.43.188:8081/getVotes', {
        id: this.voteId
      }).then(({status, data}) => {
        // console.log(data)
        if (data.msg === '111') {
          this.list = data.info
          this.themeId(this.list[this.list.length - 1].vcId)
          this.obj = this.list[this.list.length - 1]
        }
        // console.log(this.list[this.list.length - 1].vcId)
      }).catch((error) => {
        swal('Info' + error, '', 'error')
      })
    },
    handleTouchEnd () {
      this.getVoteInfo()
    }
  },
  mounted () {
    this.getVoteInfo()
    this.scroll = new Bscroll(this.$refs.wrapper, {click: true})
  }
}
</script>

<style lang="stylus" scoped>
@import '~style/variable.styl'
.list
  overflow: hidden
  padding: 1.5rem .5rem
  .item
    background: $bgcolor
    padding: 0 .5rem
    line-height: 1rem
    color: #fff
    border: .02rem solid #aaa
    font-size: .4rem
    overflow: hidden
    margin-bottom: .5rem
    box-shadow: .1rem .1rem .3rem .12rem #ccc
    .item-button
      float: right
      padding: .3rem .7rem
      background: #31C9B1
      margin-bottom: .6rem
      margin-top: -1.8rem
      border: .03rem solid #fff
    .theme
      margin: .6rem .5rem .3rem 0
      font-family: STXingkai
      font-size: .8rem
      color: #444
    .box
      padding: 0 .6rem
      font-family: STLiti
      font-size: .60rem
.appear
    display: none
.empty
   height: 20rem
   display: flex
   flex-direction: column
   justify-content: center
   text-align: center
   font-size: .6rem
   color: red
   font-weight: 500
   line-height: 1.2rem
   font-family: STXingkai
   position: absolute
   top: 0
   left: 0
   bottom: 0
   right: 0
</style>
